<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>酒店分布</title>
<style>
body,html{ margin:0;padding:0;font:12px/16px Verdana,Helvetica,Arial,sans-serif;width: 100%;height: 100%}
.container{
  height: 100%
}
</style>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8c9c069fcaf9c28176ee677a2ecc571f&plugin=AMap.ControlBar"></script>
</head>
<body >
<div id="container" style="width:100%; height:100%;resize:both;"></div>
<script language="javascript">
var map;

  map = new AMap.Map('container', {
    // resizeEnable: true,
    // rotateEnable:true,
    // pitchEnable:true,
    zoom: 13,
    pitch:80,
    //rotation:-15,
    //viewMode:'3D',//开启3D视图,默认为关闭
    // buildingAnimation:true,//楼块出现是否带动画
 
    // expandZoomRange:true,
    zooms:[3,20],
    center:[113.149939,22.993669]
  });




var lnglats =
[[113.232922,23.005806],
[113.106913,23.026584],
[113.139228,23.012665],
[113.111881,23.033694],
[116.83245,40.367308],
[113.113533,23.030899],
[113.109109,23.025239],
[113.123932,22.989992],
[113.171745,23.024389],
[113.154437,23.162132],
[113.156404,23.045386],
[113.099361,23.063884],
[113.181874,23.103795],
[113.164943,23.023542],
[113.151994,23.038449],
[113.058469,23.059894],
[113.217197,22.926226],
[113.226046,22.866331],
[113.240032,22.951933],
[113.07804,22.872231],
[113.259459,22.76382],
[113.095525,22.951171],
[113.102943,22.95304],
[113.244483,22.952438],
[113.160291,22.972989],
[113.276123,22.803468],
[113.289013,22.796216],
[113.147981,23.056605]
]

var names=[
"佛山希尔顿酒店 ",
"佛山恒安瑞士大酒店",
"佛山星汇四季酒店",
"佳宁娜大酒店",
"维纳斯皇家酒店（佛山魁奇地铁站）",
"佛山岭南天地马哥孛罗酒店",
"佛山皇冠假日酒店",
"佛山市东江国际大酒店  ",
"佛山金禧国际酒店",
"佛山里水凯悦嘉轩酒店",
"佛山希尓顿花园酒店",
"佛山南海假日酒店",
"佛山南海和华希尔顿逸林酒店",
"佛山格雷斯精选酒店（桂城千灯湖店）",
"佛山南海新湖酒店",
"佛山富林朗悦酒店 ",
"佛山顺德铂尔曼酒店 ",
"佛山顺德保利假日酒店",
"佛山顺德顺联温德姆酒店",
"顺德联塑万怡酒店",
"佛山哥顿酒店",
"佛山财神酒店",
"佛山市德悦高酒店",
"佛山新君悦国际酒店",
"维也纳国际酒店（佛山花卉世界店）",
"顺德仙泉酒店",
"顺德康年花园酒店",
"佛山保利洲际酒店"
]
var adds=[
"佛山禅城区岭南大道北127号",
"佛山禅城区城门头西路1号环球国际广场1层",
"佛山禅城区季华六路11号",
"佛山市禅城区祖庙路14号",
"佛山禅城区汾江南路38号",
"佛山禅城区人民路97号",
"佛山禅城区汾江中路118号",
"佛山市岭南大道北121号",
"佛山南海区桂城东平路22号",
"佛山南海区里水镇里水大道南28号",
"佛山南海区灯湖桂城街道桂澜中路20号",
"佛山市狮山镇罗村桂丹路段旁",
"佛山南海区大沥镇广佛路盐步段和华商贸广场1座",
"佛山南海区桂城街道简平路7号益田假日天地9座",
"佛山南海区桂城佛平二路158号",
"佛山市南海区罗村南湖二路2",
"佛山顺德区北滘镇林上路2号",
"佛山市顺德区伦教荔祥路",
"佛山顺德区陈村镇佛陈路1号",
"佛山顺德区龙江镇文华路11号",
"佛山顺德区容桂大道中38号",
"佛山顺德区乐从大道东B82号",
"佛山顺德区乐从镇新桂路A78号",
"佛山顺德区佛陈路东延线1号",
"佛山市顺德区陈村镇佛陈路3号",
"佛山市顺德区顺峰山旅游区岭东路",
"佛山市顺德区大良新城区兴顺路嘉信城市广场一期",
"佛山市顺德区乐从镇东平新城文华南路8号"
]
   var markers = [];
   var infoWindows = [];

    for (var i = 0; i < lnglats.length; i++) {
        var lnglat = lnglats[i];
        // 创建点实例
        var marker = new AMap.Marker({
            position: new AMap.LngLat(lnglat[0], lnglat[1]),
            icon: './holiday.png',
            extData: {
                id: i
            }
        });

        marker.content =  i ;
        marker.on('click', showInfoM);
        markers.push(marker);

         var info = [];
         info.push("<div style=\' background-color:#1296db;color:white;padding:5px 10px; \'  ");
         info.push( names[i]);
         //info.push("地址 :"+adds[i]+"</div>");
         //console.log(info);

        marker.setLabel({
        //offset: new AMap.Pixel(5, 5),  //设置文本标注偏移量
        content:info.join("<br/>"), //设置文本标注内容
        direction:'right',//设置文本标注方位
    });

    if(i==1){marker.setLabel({
       // offset: new AMap.Pixel(0, 30), 
        direction:'right',//设置文本标注方位
    })}

    if(i==13){marker.setLabel({
       // offset: new AMap.Pixel(0, 30), 
        direction:'top',//设置文本标注方位
    })}

    if(i==9){marker.setLabel({
        //offset: new AMap.Pixel(0, 30), 
        direction:'left',//设置文本标注方位
    })}

    if(i==22){marker.setLabel({
        //offset: new AMap.Pixel(0, 30), 
        direction:'left',//设置文本标注方位
    })}

    if(i==25){marker.setLabel({
        //offset: new AMap.Pixel(0, 30), 
        direction:'top',//设置文本标注方位
    })}

    if(i==2){marker.setLabel({
        //offset: new AMap.Pixel(0, 30), 
        direction:'left',//设置文本标注方位
    })}

    if(i==0){marker.setLabel({
        //offset: new AMap.Pixel(0, 30), 
        direction:'left',//设置文本标注方位
    })}

    if(i==11){marker.setLabel({
        //offset: new AMap.Pixel(0, 30), 
        direction:'top',//设置文本标注方位
    })}

    if(i==18){marker.setLabel({
        offset: new AMap.Pixel(-30, 30), 
        direction:'right',//设置文本标注方位
    })}

    if(i==6){marker.setLabel({
        //offset: new AMap.Pixel(-30, 30), 
        direction:'left',//设置文本标注方位
    })}

    if(i==7){marker.setLabel({
        //offset: new AMap.Pixel(-30, 30), 
        direction:'top',//设置文本标注方位
    })}
    if(i==8){marker.setLabel({
        //offset: new AMap.Pixel(-30, 30), 
        direction:'bottom',//设置文本标注方位
    })}

    if(i==20){marker.setLabel({
        //offset: new AMap.Pixel(-30, 30), 
        direction:'left',//设置文本标注方位
    })}

    if(i==14){marker.setLabel({
        //offset: new AMap.Pixel(-30, 30), 
        direction:'top',//设置文本标注方位
    })}

    if(i==1){marker.setLabel({
        //offset: new AMap.Pixel(-30, 30), 
        direction:'top',//设置文本标注方位
    })}



       
        var infoWindow;
        infoWindow = new AMap.InfoWindow({
            content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
        });
        infoWindows.push(infoWindow)

    }
    // 创建覆盖物群组，并将 marker 传给 OverlayGroup
    var overlayGroups = new AMap.OverlayGroup(markers);
    map.add(overlayGroups);
 

   


   var marker1 = new AMap.Marker({
        map: map,
        icon: "./1635823163.png",
//        position: [113.167333,22.951149]
    });
    marker1.setLabel({
        //offset: new AMap.Pixel(0, 5),  //设置文本标注偏移量
        content:"潭洲会展中心", //设置文本标注内容
        direction: 'top' //设置文本标注方位
    });
       

 var marker2 = new AMap.Marker({
        map: map,
        icon: "./1635822731.jpg",
        //animation:"AMAP_ANIMATION_BOUNCE",
        position: [113.141612,22.959234]
    });
    marker2.setLabel({
        //offset: new AMap.Pixel(0, 5),  //设置文本标注偏移量
        content:"佛山国际体育文化演艺中心", //设置文本标注内容
        direction: 'top' //设置文本标注方位
    });
       

function showInfoM(e){
          console.log(e.target.content);
        //infoWindows[e.target.content].open(map, lnglats[e.target.content]);

        //infoWindows[e.target.content].open(map, [113.130491,22.96615]);
    }
// marker.on('click', showInfoM);

// var infoWindow;
//     //在指定位置打开信息窗体
// function openInfo() {
//         //构建信息窗体中显示的内容
//         var info = [];
//         info.push("<div style=\" background-color:#1296db;color:white;  \"  ");
//         info.push("酒店 :佛山新城保利洲际酒店 ");
//         //info.push("联系电话 : 13824922992");
//         info.push("地址 :佛山顺德区乐从镇东平新城文华南路8号</div>");
//         infoWindow = new AMap.InfoWindow({
//             content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
//         });
    
//         infoWindow.open(map, [113.130491,22.96615]);

//     }
//     openInfo();


</script>

<style>
.amap-info-content{
    background:#1296db !important;
}
.amap-marker-label{
padding: 0px !important;
border:0px !important;
}



</style>
</body>
</html>